<!-- 基础：1、介绍 处理用户输入 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：1、介绍 处理用户输入</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<!-- 使用v-on指令实现事件绑定 -->
	<div id="app">
		<p>{{ message }}</p>
		<!-- on就是当什么时的意识，v-on:click="reverseMessage"这串东西的意思就是，
			当按钮被点击时，reverseMessage这个方法或函数被调用
			PS.注意这个方法是el="#app"的vue的实例特有的，别的vue实例绑定的DOM事件
			   无法调用它，换句话说，每个vue实例都有自己独有注册的方法 -->
		<button v-on:click="reverseMessage">反转字符串</button>
		<button v-on:click="test">测试</button>
	</div>

	<!-- 使用v-model实现表单输入和应用状态的双向数据绑定，这里实现的效果就是所见即所得 -->
	<div id="app-1">
		<p>{{ message }}</p>
		<!-- 使用了v-model的表单能改变vue实例中的数据，进而影响数据模板的实际内容显示 -->
		<input v-model="message">    
	</div>

	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello Vue.js!'
			},
			// methods就是vue实例注册的方法列表
			methods: {
				reverseMessage: function() {
					this.message = this.message.split('').reverse().join('')
				},
				test: function(){
					alert('test success!');
				}
			}
		})

		var app1 = new Vue({
			el: '#app-1',
			data: {
				message: 'Hello Vue.js!'
			}
		})
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->